<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <h1>导航栏 垂直 水平导航栏</h1>
    <ul>
        <li><a class="active" href="#home">Home</a></li>
        <li><a href="#news">News</a></li>
        <li><a href="#contact">Contact</a></li>
        <li style="float: right;"><a href="#about">About</a></li>
    </ul>
    <p>
        Fixed Top Nav
        The navigation bar will stay at the top of the page while scrolling
        Some text some text some text some text..

        Some text some text some text some text..

        Some text some text some text some text..

        Some text some text some text some text..

        Some text some text some text some text..

        Some text some text some text some text..

        Some text some text some text some text..

        Some text some text some text some text..

        Some text some text some text some text..

        Some text some text some text some text..

        Some text some text some text some text..

        Some text some text some text some text..

        Some text some text some text some text..

        Some text some text some text some text..

        Some text some text some text some text..

        Some text some text some text some text..

        Some text some text some text some text..

        Some text some text some text some text..

        Some text some text some text some text..

        Some text some text some text some text..
    </p>
    <br>
    <h1>下拉菜单</h1>
    <div class="dropdown">
        <!-- 使用<span></span> or <button></button> 这样的元素打开下来内容 -->
        <!-- 使用容器元素 div 创建下拉内容，并在其中添加任何内容。 -->
        <!-- 再用div元素包围这些元素，使用css正确定位下拉内容。 -->
        <span>把鼠标移到我上面</span>
        <div class="dropdown-content">
            <p>Hello World!</p>
        </div>
    </div>
    <div class="dropdown2">
        <button class="dropbtn">dropdown</button>
        <div class="dropdown-content2">
            <a href="#">link1</a>
            <a href="#">link2</a>
            <a href="#">link3</a>
        </div>
    </div>

    <h1>下拉式图片</h1>
    <div class="dropdown3">
        <img src="../images/绿草茵茵.jpg" alt="green" width="100px">
        <div class="dropdown-content3">
            <img src="../images/绿草茵茵.jpg" alt="green" width="300" height="200">
            <div class="desc">green</div>
        </div>
    </div>
    <br><br><br><br><br>
    <!-- 10-11 -->
    <h1>图片 库 精灵</h1>
    <div class="gallery">
        <a href="../images/绿草茵茵.jpg" target="_blank">
            <img src="../images/绿草茵茵.jpg" alt="green" width="600" height="400">
        </a>
        <div class="desc">在此处添加图像描述</div>
    </div>

    <div class="gallery">
        <a href="../images/翱翔天际.jpg" target="_blank">
            <img src="../images/../images/翱翔天际.jpg" alt="green" width="600" height="400">
        </a>
        <div class="desc">在此处添加图像描述</div>
    </div>


    <div class="gallery">
        <a href="../images/蓝天白云.jpg" target="_blank">
            <img src="../images/蓝天白云.jpg" alt="green" width="600" height="400">
        </a>
        <div class="desc">在此处添加图像描述</div>
    </div>


    <div class="gallery">
        <a href="../images/鲜花盛开.jpg" target="_blank">
            <img src="../images/鲜花盛开.jpg" alt="green" width="600" height="400">
        </a>
        <div class="desc">在此处添加图像描述</div>
    </div>

    <img id="home" src="../icon/婚纱摄影.png" alt="婚纱摄影">
    <img id="next" src="../icon/房屋出租.png" alt="房屋出租">
    <!-- 
    <ul id="navlist">
        <li id="home"><a href="../icon/婚纱摄影.png"></a></li>
        <li id="home"><a href="../icon/房屋出租.png"></a></li>
        <li id="home"><a href="../icon/招聘求职.png"></a></li>
    </ul> -->

    <h1>属性选择器</h1>

    <p title="abcd">离离原上草，</p>
    <p title="helloabc">一岁一枯荣。</p>
    <p title="heabcll">野火烧不尽，</p>
    <p>春风吹又生。</p>


    <h1>表单</h1>


    <!-- 11-12 -->
    <h1>计数器</h1>
    <h1>网站布局</h1>
    <h1>单位 特异性</h1>

    <!-- css3高级教程 -->
    <!-- 14-15 -->
    <h1>圆角，边框图像，背景</h1>

    <h1>颜色 渐变 径向渐变</h1>

    <h1>阴影 box-shadow 文本效果</h1>

    <h1>网络字体 2D转换 3D转换</h1>

    <!-- 19-20 -->
    <h1>过渡 动画 工具提示 </h1>
    <!-- 20-21 -->
    <h1>图像样式 fit 按钮</h1>
    <!-- 21-22 -->
    <h1>分页 多列 用户界面</h1>
    <!-- 22-23 -->
    <h1>变量 覆盖变量 js 媒体查询</h1>
    <!-- 23-24 -->
    <h1>box sizing</h1>
    <h1>flexbox 媒体查询 例子</h1>

    <!-- 
     18-19 休息1H
     19-20 奖励自己跳操一小时
     20-21 洗澡
     21-22：30 看英语 1h 30min
     22:30-23:00 30min 看书睡觉 -->


</body>

</html>